<template>
  <div class="InvoiceIdentification">
    <img src="../assets/logo.png" alt="">
    <div class="itemList">
      <p class="item">
        <span>金额</span>
        <span>￥309.1</span>
      </p>
      <p class="item">
        <span>税额</span>
        <span>￥3.1</span>
      </p>
      <p class="item">
        <span>税价合计</span>
        <span class="black" style="font-size:14px">￥309.1</span>
      </p>
    </div>

    <div class="itemList">
      <p class="item">
        <span>发票代码</span>
        <span>46545135465</span>
      </p>
      <p class="item">
        <span>开票号码</span>
        <span>165564523</span>
      </p>
      <p class="item">
        <span>开票日期</span>
        <span>2018-92-08</span>
      </p>
      <p class="item">
        <span>效验码</span>
        <span>12651561155656655</span>
      </p>
    </div>

    <div class="itemList">
      <p class="item">
        <span>购买方</span>
        <span class="black">天津中审连会计师事务所有限公司</span>
      </p>
      <p class="item">
        <span>纳税人识别号</span>
        <span class="black">MDU156465444565656</span>
      </p>
      <p class="item">
        <span>地址、电话</span>
        <span>大师傅士大夫士大夫敢死队</span>
      </p>
      <p class="item">
        <span>开户行及电话</span>
        <span>大师傅士大夫士大夫敢死队</span>
      </p>
    </div>

    <div class="itemList">
      <p class="item">
        <span>销售方</span>
        <span class="black">天津中审连会计师事务所有限公司</span>
      </p>
      <p class="item">
        <span>纳税人识别号</span>
        <span class="black">MDU156465444565656</span>
      </p>
      <p class="item">
        <span>地址、电话</span>
        <span>大师傅士大夫士大夫敢死队</span>
      </p>
      <p class="item">
        <span>开户行及电话</span>
        <span>大师傅士大夫士大夫敢死队</span>
      </p>
    </div>

    <div class="itemList">
      <ul>
        <li>
          <div class="liMain">
            <p>货物或应税劳务、服务</p>
            <p class="black">*餐饮服务 *餐饮</p>
          </div>
          <div>
            <p>金额</p>
            <p class="black">￥312.2</p>
          </div>
          <div>
            <p>税率</p>
            <p class="black">6%</p>
          </div>
          <div>
            <p>税额</p>
            <p class="black">￥12.2</p>
          </div>
        </li>
      </ul>
    </div>

    <div class="itemList lastItem">
      <p class="item">
        <span class="black">摘要</span>
        <span class="black">天津中审连会计师事务所有限公司</span>
      </p>
    </div>
      
    <div class="button">
      <mt-button type="primary" size="small" @click="sureUpload">确认上传</mt-button>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import { Button, Toast } from 'mint-ui';

  export default {
    data () {
      return {

      }
    },
    methods:{
      sureUpload(){ //确认上传
        Toast({
          message: '上传成功',
          // iconClass: 'icon icon-success',
          duration: 1000
        });
      }
    },
  };
</script>

<style lang="less" scoped>
  p,ul{
    margin: 0;
    padding: 0;
  }
  li {
    list-style: none;
  }
  .InvoiceIdentification{
    color: rgba(171, 171, 171, 1);
    font-size: 12px;
    font-family: Arial;
    padding: 0px 8px;
    padding-bottom: 50px;
  }
  img{
    width: 163px;
    margin: 0 auto;
    height: 40px;
    background-color: #eee;
    margin-bottom: 8px;
  }
  .item{
    display: flex;
    justify-content: space-between;
    height: 25px;
    line-height: 25px;
  }
  .itemList{
    border-bottom: solid 1px #D4D4D4;
    padding: 8px 0px;
  }

  .lastItem{
    border-bottom: none;
    .item{
      height: 30px;
      line-height: 30px;
    }
  }

  .black{
    color: #101010;
  }

  ul{
    padding: 9px 0px;
    li{
      display: flex;
      div{
        flex: 1;
        p{
          height: 23px;
          line-height: 23px;
        }
      }
    }
    .liMain{
      min-width: 121px;
    }
  }

  .button{
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    width: 95%;
    margin: 0 auto;
    padding-bottom: 8px;
    padding-top: 8px;
    background-color: #fff;
    .mint-button{
      width: 90%;
      margin: 0 auto;
    }
  }
</style>
